<template>
    <!-- 查询条件 -->
    <el-card>
        <el-button type="success" size="default" @click="flowFormVisiable = true">发起申请</el-button>
        <!-- 发起申请 -->
        <el-dialog title="申请单" v-model="flowFormVisiable" width="40%">
            <el-form :model="flowForm" label-width="100px" :inline="false" size="normal"
                style="width:500px;margin: 0 auto">
                <el-form-item label="请假类型">
                    <el-select v-model="flowForm.TypeId" placeholder="请选择请假类型" clearable>
                        <el-option v-for="item in flowList" :key="item.Id" :label="item.FlowName" :value="item.Id">
                        </el-option>
                    </el-select>

                </el-form-item>
                <el-form-item label="请假人">
                    <el-input v-model="flowForm.Applicant"></el-input>
                </el-form-item>

                <el-form-item label="开始时间">
                    <el-date-picker v-model="flowForm.StartTime" type="datetime" placeholder="开始时间"
                        :default-time="new Date()" />
                </el-form-item>
                <el-form-item label="结束时间">
                    <el-date-picker v-model="flowForm.EndTime" type="datetime" placeholder="结束时间"
                        :default-time="new Date()" />
                </el-form-item>
                <el-form-item label="请假原因">
                    <el-input type="textarea" rows="3" v-model="flowForm.Reason"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="createForm">申请</el-button>

                </el-form-item>
            </el-form>
        </el-dialog>

    </el-card>
    <!-- 我的流程列表 -->
    <el-card>
        <el-table :data="myFlows" border stripe>
            <el-table-column label="流程实例单号" prop="FlowInstanceId" align="center">
            </el-table-column>
            <el-table-column label="当前节点名称" prop="NodeName" align="center">
            </el-table-column>
            <el-table-column label="流程状态" prop="FlowStatus" align="center">
            </el-table-column>
            <el-table-column label="当前操作人" prop="CurrentOperatorName" align="center">
            </el-table-column>
            <el-table-column label="下一个操作人" prop="NextOperatorName" align="center">
            </el-table-column>
            <el-table-column label="已操作人" prop="HasOperatedPersons" align="center">
            </el-table-column>
            <el-table-column label="更新时间" prop="UpdTime" align="center">
            </el-table-column>
        </el-table>

    </el-card>

</template>



<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios'
import { baseURL_dev } from '@/config/baseURL'

const baseURL = baseURL_dev
axios.defaults.baseURL = baseURL
import { loginStore } from '@/stores/login';
const store = loginStore();
import { ElMessage } from 'element-plus'

const flowFormVisiable = ref(false)
//申请单
const flowForm = reactive({
    TypeId: "",
    ApplicantId: "",
    Applicant: "",
    StartTime: "",
    EndTime: "",
    Reason: "",
})
const flowList = ref([])
//获取流程类型
function getFlowList() {
    axios.get("WorkFlow/GetFlowTypes").then(res => {
        flowList.value = res.data.Data;
    })
}

//我的流程
const myFlows = ref([])
//获取我的流程列表
function getMyFlows() {
    let empId = '';
    if (store.getUserInfo().IsTenant) {
        empId = store.getUserInfo().TenantId + 'admin'
    }
    else {
        empId = store.getUserInfo().UId
    }
    axios.get("WorkFlow/GetAppliedFlows?empId=" + empId).then(res => {
        myFlows.value = res.data.Data;
    })
}
//发起申请
function createForm() {
    if (store.getUserInfo().IsTenant) {
        flowForm.ApplicantId = store.getUserInfo().TenantId + 'admin';
    }
    else {
        flowForm.ApplicantId = store.getUserInfo().UId;
    }
    axios.post("WorkFlow/CreateApplicationForm", flowForm).then(res => {
        if (res.data.Code == 200) {
            ElMessage.success("申请成功");
            flowFormVisiable.value = false;
            getMyFlows();
        }
        else {
            ElMessage.error(res.data.Msg);
        }
    })
}


onMounted(() => {
    getFlowList();
    getMyFlows();

})
</script>


<style scoped></style>